<template>
    <div class="photoinfo-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time | dateFromat}}</span>
            <span>点击：{{photoinfo.click}}</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumbs">
            <!-- 注意：这里使用的 vue-preview 组件是版本 1.1.3,之前上课录屏时候, 所使用的 1.0.5 版本的 vue-preview 存在 Bug -->
            <vue-preview :slides="list"></vue-preview>
        </div>

        <!-- 内容 -->
        <div class="content" v-html="photoinfo.content"></div>

        <!-- 评论子组件 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>
<script>
// 导入评论子组件 
import comment from '../subcomponents/comment.vue'

import axios from 'axios'
import { Toast } from "mint-ui";
export default {
    data(){
        return{
            id:this.$route.params.id,//从路由中获取图片ID
            photoinfo:{},
            list:[] //缩率图数组
        }
    },
    created(){
        this.getInfoPhoto();
        this.getThumbs();
    },
    methods:{   
        getInfoPhoto(){
            //获取图片的详情。         
            axios.get('api/getimageinfo/'+this.id)
            .then(res=>{
                if(res.data.status===0){
                    this.photoinfo=res.data.message[0]
                }
                else{
                    Toast('数据错误')
                }
            })
            .catch(res=>{
                Toast('数据错误')
            })
        },
        getThumbs(catid){
            //获取缩率图
            axios.get('api/getthumimages/'+this.id)
            .then(res=>{
                if(res.data.status===0){
                    //循环每个图片数据，补全图片的宽和高
                    res.data.message.forEach(item => {
                        item.w=600;
                        item.h=400;
                        item.msrc = item.src
                    });
                    // 把完成的数据保存到数据中
                    this.list=res.data.message
                    console.log(this.list)
                }
            })
            .catch(res=>{
                Toast('缩率图请求数据错误')
            })
        }
    },
    components: { //注册评论子组件
        'cmt-box':comment
    }
}
</script>
<style lang="scss" scoped>
.photoinfo-container{
    padding: 3px;
    h3{
        font-size: 14px;
        color: #26a2ff;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }
}
</style>
<style lang="scss">
.thumbs {
  .my-gallery {
    display: flex;
    flex-wrap: wrap;
  }
  figure {
    width: 100px;
    height: 100px;
    margin: 10px;
    box-shadow: 0 0 8px #999;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>